import React, { Component } from 'react'
import echarts from 'echarts'
import 'echarts/map/js/china'
import geoJson from 'echarts/map/json/china.json'
// import { geoCoordMap, provienceData } from './geo'
import { BorderBox1 ,BorderBox8 ,BorderBox13,Decoration1 ,ScrollBoard,ScrollRankingBoard,WaterLevelPond } from '@jiaminghi/data-view-react'
// import { Decoration9 ,Loading} from '@jiaminghi/data-view-react'
import './index.css'
// import { ScrollBoard } from '@jiaminghi/data-view-react';
import moment from "moment";
import dataMoney from "./data/allData.json"; // 直接导入 JSON 文件

const data = [
  { name: '北京', value: 123 },
  { name: '上海', value: 98 },
  { name: '广州', value: 78 },
  { name: '深圳', value: 66 },
];

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      realDataList: [
        { id: 1, status: 1, weather: 0, name: '资阳乐至众诺诚项目', power: '0kw', DailyPower: '0MWh', capacity: '1.5MW', address: '四川省资阳市', value: 1.5, DailyPowerValue: 0 },
        { id: 2, status: 1, weather: 1, name: '镇江捷达项目', power: '0kw', DailyPower: '0MWh', capacity: '0.9MW', address: '江苏省镇江市', value: 0.9, DailyPowerValue: 0 },
        { id: 3, status: 3, weather: 2, name: '孝感市第一高级中学项目', power: '0kw', DailyPower: '0MWh', capacity: '1.2MW', address: '湖北省孝感市', value: 1.2, DailyPowerValue: 0 },
        { id: 4, status: 1, weather: 0, name: '资阳佳鑫项目 ', power: '0kw', DailyPower: '0MWh', capacity: '0.8MW', address: '四川省资阳市', value: 0.8, DailyPowerValue: 0 },
        { id: 5, status: 1, weather: 0, name: '晋中巨龙装饰城项目', power: '0kw', DailyPower: '0MWh', capacity: '1.9MW', address: '山西省晋中市', value: 1.9, DailyPowerValue: 0 },
        { id: 6, status: 1, weather: 1, name: '宣城松岭电力项目', power: '0kw', DailyPower: '0MWh', capacity: '3.1MW', address: '安徽省宣城市', value: 3.1, DailyPowerValue: 0 },
        { id: 7, status: 3, weather: 2, name: '眉山奥创项目 ', power: '0kw', DailyPower: '0MWh', capacity: '1.3MW', address: '四川省眉山市', value: 1.3, DailyPowerValue: 0 },
        { id: 8, status: 1, weather: 0, name: '双鸭山红兴隆医院项目', power: '0kw', DailyPower: '0MWh', capacity: '1.5MW', address: '黑龙江省双鸭山市', value: 1.5, DailyPowerValue: 0 },
        { id: 9, status: 1, weather: 0, name: '无锡华东重机项目', power: '0kw', DailyPower: '0MWh', capacity: '1.5MW', address: '江苏省无锡市', value: 1.5, DailyPowerValue: 0 },
        { id: 10, status: 1, weather: 1, name: '昆山富泰项目', power: '0kw', DailyPower: '0MWh', capacity: '1.3MW', address: '江苏省昆山市', value: 1.3, DailyPowerValue: 0 },
        { id: 11, status: 3, weather: 2, name: '昆山联东项目', power: '0kw', DailyPower: '0MWh', capacity: '2.4MW', address: '江苏省昆山市', value: 2.4, DailyPowerValue: 0 },
        { id: 12, status: 1, weather: 0, name: '南京英沃斯汶项目', power: '0kw', DailyPower: '0MWh', capacity: '0.4MW', address: '江苏省南京市', value: 0.4, DailyPowerValue: 0 },
        { id: 13, status: 1, weather: 0, name: '无锡精成锻造项目', power: '0kw', DailyPower: '0MWh', capacity: '0.8MW', address: '江苏省无锡市', value: 0.8, DailyPowerValue: 0 },
      ],
      energyData: {
        CO2Emissions: 0,
        greenPlants: 0,
        coalEnergySaving: 0,
      },
      RunningNum: 0,
      RunningNumPer: 0,
      RunningNumPerOther: 0,
      lastSevenDaysNum: [],
      nowTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      weekdaysNow: moment().format('dddd'),
      startTimeMoment: moment("2023-06-09"),
      nowTimeMoment: moment(),
      days: 0,
      dateRaw: { data: [60],  shape: 'round' },
      effectivePower: 18.6,
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      myChart6: null,
      topdata:{data: [
        {
          name: '安徽宣城松岭电力项目',
          value: '3.1MW'
        },
        {
          name: '江苏昆山联东项目',
          value: '2.4MW'
        },
        {
          name: '山西晋中巨龙装饰城项目',
          value: '1.9MW'
        },
        {
          name: '四川资阳乐至众诺诚项目',
          value: '1.5MW'
        },
        {
          name: '黑龙江双鸭山红兴隆医院项目',
          value: '1.5MW'
        },
        {
          name: '江苏无锡华东重机项目',
          value: '1.5MW'
        },
        {
          name: '四川眉山奥创项目',
          value: '1.3MW'
        },
        {
          name: '江苏昆山富泰项目',
          value: '1.3MW'
        },
        {
          name: '湖北孝感一中项目',
          value: '1.2MW'
        },
        {
          name: '江苏镇江捷达项目',
          value: '0.9MW'
        },
        {
          name: '四川资阳佳鑫项目',
          value: '0.8MW'
        },
        {
          name: '江苏无锡华东重机项目',
          value: '0.8MW'
        },
        {
          name: '江苏南京英沃斯汶项目',
          value: '0.4MW'
        },
      ],
      carousel: 'page'},
    tabledata:{
      header: ['状态', '天气', '电站名称', '实时功率', '日发电量','装机容量', '电站地址'],
      data: [  
        ['离线', '☁', '四川资阳乐至众诺诚项目', '0kw', '290.695MWh', '1.5mW', '四川资阳市'],
        ['离线', '☁', '江苏镇江捷达项目', '0kw', '135.449MWh','0.9MW', '江苏镇江市'],
        ['离线', '☁', '湖北孝感一中项目', '0kw', '714.927MWh','1.2MW', '湖北孝感市'],
        ['离线', '☀', '四川资阳佳鑫项目 ', '0kw', '714.927MWh','0.8MW', '四川资阳市'],
        ['离线', '☁', '山西晋中巨龙装饰城项目', '0kw', '714.927MWh','1.9MW', '山西晋中市'],
        ['离线', '☀', '安徽宣城松岭电力项目', '0kw', '714.927MWh','3.1MW', '安徽宣城市'],
        ['离线', '☁', '四川眉山奥创项目 ', '0kw', '714.927MWh','1.3MW', '四川眉山市'],
        ['离线', '☀', '黑龙江双鸭山红兴隆医院项目', '0kw', '714.927MWh','1.5MW', '黑龙江双鸭山市'],
        ['离线', '☀', '江苏无锡华东重机项目', '0kw', '714.927MWh','1.5MW', '江苏无锡市'],
        ['离线', '☀', '江苏昆山富泰项目', '0kw', '714.927MWh','1.3MW', '江苏昆山市'],
        ['离线', '☀', '江苏昆山联东项目', '0kw', '714.927MWh','2.4MW', '江苏昆山市'],
        ['离线', '☀', '江苏南京英沃斯汶项目', '0kw', '714.927MWh','0.4MW', '江苏南京市'],
        ['离线', '☀', '江苏无锡华东重机项目	', '0kw', '714.927MWh','0.8MW', '江苏无锡市'],
      ],
      index: true,
      // columnWidth: [50],
      align: ['center'],
      columnWidth: [50, 50, 50, 250, 100, 120, 150], // <- 设置每列宽度
    }
    }
  }
  componentDidMount() {
    this.initalECharts()
    // this.initalECharts1()
    // this.initalECharts2()
    this.initalECharts3()
    this.initalECharts4()
    this.initalECharts5()
    const that = this
    window.onresize = function() {
      that.state.myChart1.resize()
      // that.state.myChart2.resize()
      // that.state.myChart3.resize()
      that.state.myChart4.resize()
      that.state.myChart5.resize()
      that.state.myChart6.resize()
    }
    this.getEfficiency(this.getTime())
    this.energyConservationAndEmissionReduction()
    this.setPowerIncom()
    this.warningM()

    setTimeout(() => {
      this.setTabledata()
    }, 100)
    setInterval(() => {
      this.warningM()
      this.initalECharts4() 
      this.initalECharts5()

      let timeStr = this.getTime()
      this.getEfficiency(timeStr)
      this.setTabledataChangeStatus()
      this.energyConservationAndEmissionReduction()
      this.setPowerIncom()
      this.setTabledata()
    }, 1000 * 60)
    // }, 1000)
    setInterval(() => {
      const { nowTimeMoment, startTimeMoment } = this.state
      const a = nowTimeMoment.diff(startTimeMoment, 'days')
      this.setState({
        nowTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        days: a,
      });
    }, 1000)

    // setInterval(() => {
    //   this.setTabledata()
    // }, 1000 * 60)

    // console.log(dataMoney)
  }
  // 累计发电，累计收益
  setPowerIncom(){
    const now = moment();
    const hour = now.hour();
    const minute = now.minute();
    
    // 计算当前时间的分钟数（便于比较）
    const currentMinutes = (hour - 6) * 60 + minute;

    let power = 0
    let income = 0
    if(hour < 6){
      power = dataMoney?.data[0]?.power || 0
      income = dataMoney?.data[0]?.income || 0
    }else if(hour < 19){
      power = dataMoney?.data[currentMinutes]?.power || 0
      income = dataMoney?.data[currentMinutes]?.income || 0
    }else{
      power = dataMoney?.data[(19 - 6) * 60 - 1]?.power || 0
      income = dataMoney?.data[(19 - 6) * 60 - 1]?.income || 0
    }
                // 示例数据
    this.renderNumber("power", power);
    this.renderNumber("income", income);
  }
  setTabledata(){
    // 天气对应di说明
    const weatherType = [
      { name: '晴', status: '1', icon: '☀', },
      { name: '云', status: '2', icon: '☁', },
      { name: '雨', status: '3', icon: '🌧', },
      { name: '雪', status: '4', icon: '❄', },
    ]
    const statusType = [ 
      { name: '在线', status: '1' },
      { name: '报警', status: '2' },
      { name: '离线', status: '3' },
    ]
    const arr = [ '☀', '☁', '🌧', '❄']
    const dataAll = [ ...this.state.realDataList]
    let power = ''

    const arrList = []
    dataAll.forEach((item, index) => {
      let randomFactor = 0
      if(item.weather === 0){
        randomFactor = 0.5 + Math.random() * 0.3; // [0.5, 0.8]
      }else if(item.weather === 1){
        randomFactor = 0.3 + Math.random() * 0.2; // [0.3, 0.5]
      }else if(item.weather === 2 || item.weather === 3){
        randomFactor = 0.1 + Math.random() * 0.1; // [0.1, 0.2]
      }
      power = (randomFactor * item.value).toFixed(2) + 'MW'
      const now = moment();
      const hour = now.hour();
      const minute = now.minute();
      // console.log(now.format('YYYY-MM-DD HH:mm:ss'))
      
      // 计算当前时间的分钟数（便于比较）
      const currentMinutes = hour * 60 + minute;
      // 5点对应的分钟数
      const start0 = 5 * 60;
      // 6点对应的分钟数
      const start1 = 6 * 60;
      // 19点对应的分钟数
      const start2 = 19 * 60;

      let DailyPower = ''

      let DailyPowerValue = Number(item.DailyPowerValue)
      // console.log(item)
      // console.log('DailyPowerValue:' + DailyPowerValue)
      // 大于19点
      if(currentMinutes > start2){
        // console.log('大于19点')
        power = '0MW'
        DailyPowerValue = DailyPowerValue ? DailyPowerValue : 13 * item.value * randomFactor
      // 早上6点到晚上19点
      } else if (currentMinutes > start1){
        // console.log('早上6点到晚上19点')
        let calNum = (currentMinutes - start1) / 60 * randomFactor * item.value - 0
        calNum = calNum < 0.001 ? 0.001 : calNum
        DailyPowerValue = !!DailyPowerValue ? DailyPowerValue * 1.001097 : calNum

        if(item.status !== 1) {
          power = '0MW'
          DailyPowerValue = 0
        }

        // DailyPowerValue = DailyPowerValue ? DailyPowerValue * 1.006 : (currentMinutes - start1) / 60 * randomFactor * item.value
      // 早上5点到早上6点
      }else if(currentMinutes > start0){
        console.log('早上5点到早上6点')
        power = '0MW'
        DailyPowerValue = 0
      // 其他时间：19点到第二天5点
      }else{
        // console.log('其他时间：19点到第二天5点')
        power = '0MW'
      }
      // console.log('DailyPowerValue:修改后的值' + DailyPowerValue)
      // console.log('--------------------------------------')
      const DailyPowerValueChange = Number((DailyPowerValue - 0).toFixed(3))
      DailyPower = DailyPowerValueChange + 'MWh'
        // 方法1：使用扩展运算符(...)复制数组并修改指定元素


      let statusName = ''
      let colorName = ''
      if(item.status === 1){
        statusName = '在线'
        colorName = 'green'
      }else if(item.status === 2){
        statusName = '报警'
        colorName = 'red'
      }else{
        statusName = '离线'
        colorName = 'gray'
      }

      this.setState(prevState => {
        // 复制原数组（创建新数组，不修改原state）
        const newArray = [...prevState.realDataList];
        // 修改第7个元素（索引为6）
        newArray[index].DailyPowerValue = DailyPowerValue
        newArray[index].power = power
        newArray[index].DailyPower = DailyPower
        // 返回新的state
        return { realDataList: newArray };
      });
      
      let weather = arr[item.weather]
      arrList.push([ '<div style="color: ' + colorName + ';">' + statusName + '</div>', weather, item.name, power, DailyPower, item.capacity, item.address ])
    })
    // console.log('***********************************************')
    // // console.log(arrList)
    this.setState(prevState => {
      return {
        tabledata: {
          ...prevState.tabledata,
          data: arrList
        }
      };
    });
  }


  setTabledataChangeStatus(){
    const arr = [ '☀', '☁', '🌧', '❄']
    const dataAll = [ ...this.state.realDataList]
    const arrList = []
    dataAll.forEach((item, index) => {
      let statusName = ''
      let colorName = ''
      if(item.status === 1){
        statusName = '在线'
        colorName = 'green'
      }else if(item.status === 2){
        statusName = '报警'
        colorName = 'red'
      }else{
        statusName = '离线'
        colorName = 'gray'
      }
      let weather = arr[item.weather]
      arrList.push([ '<div style="color: ' + colorName + ';">' + statusName + '</div>', weather, item.name, item.power, item.DailyPower, item.capacity, item.address ])
    })

    // // console.log(arrList)
    this.setState(prevState => {
      return {
        tabledata: {
          ...prevState.tabledata,
          data: arrList
        }
      };
    });
  }



  warningM(){
    // 计算报警占比
    const num = this.checkTimeRange()
    let per = ((num / 13) * 100).toFixed(0) + "%";
    let perOther = (((13-num) / 13) * 100).toFixed(0) + "%";
    this.setState({
      RunningNum: num,
      RunningNumPer: per,
      RunningNumPerOther: perOther,
    });
  }
  getTime(){
    const now = new Date();
    // 获取小时 (0 - 23)
    const hours = now.getHours();
    // 获取分钟 (0 - 59)
    const minutes = now.getMinutes();
    const hh = String(hours).padStart(2, "0");
    const mm = String(minutes).padStart(2, "0");
    const timeStr = `${hh}:${mm}`;
    return timeStr
  }
  getEfficiency(timeStr) {

    // 定义关键时间点和效率
    const schedule = {
      "06:00": 0.01,
      "07:00": 0.06,
      "08:00": 0.27,
      "09:00": 0.46,
      "10:00": 0.61,
      "11:00": 0.73,
      "12:00": 0.79,
      "13:00": 0.80,
      "14:00": 0.76,
      "15:00": 0.66,
      "16:00": 0.52,
      "17:00": 0.34,
      "18:00": 0.13,
      "19:00": 0.01,
      "19:30": 0.00,
    };
    const inputMin = this.toMinutes(timeStr);

    // 判断是否在 19:30 到次日 06:00 之间
    const nightStart = this.toMinutes("19:30"); // 1170
    const nightEnd = this.toMinutes("06:00");   // 360
    let result = ''
    if (inputMin >= nightStart || inputMin < nightEnd) {
      result = 0
      const effectivePowerChange = result * 18.6 / 100
      // // console.log(effectivePowerChange)
      this.setState({
        dateRaw: {
          ...this.state.dateRaw,
          data: [result]
        },
        effectivePower: parseFloat(effectivePowerChange.toFixed(1)) 
      });
      return;
    }

    const times = Object.keys(schedule).map(this.toMinutes).sort((a, b) => a - b);

    // 找到当前时间在哪两个关键点之间
    let prev = times[0], next = times[times.length - 1];
    for (let i = 0; i < times.length - 1; i++) {
      if (inputMin >= times[i] && inputMin <= times[i + 1]) {
        prev = times[i];
        next = times[i + 1];
        break;
      }
    }

    // 取前后效率
    const prevKey = Object.keys(schedule).find(k => this.toMinutes(k) === prev);
    const nextKey = Object.keys(schedule).find(k => this.toMinutes(k) === next);

    const prevEff = schedule[prevKey];
    const nextEff = schedule[nextKey];

    // 插值计算
    const ratio = (inputMin - prev) / (next - prev);
    let efficiency = prevEff + (nextEff - prevEff) * ratio;

    // 加入随机浮动（上下10%）
    const randomFactor = 0.9 + Math.random() * 0.2; // [0.9, 1.1]
    efficiency *= randomFactor;

    // 转百分比
    result = this.SetEfficiency(efficiency)
    const effectivePowerChange = result * 18.6 / 100
    // // console.log(effectivePowerChange)
    this.setState({
      dateRaw: {
        ...this.state.dateRaw,
        data: [result]
      },
      effectivePower: parseFloat(effectivePowerChange.toFixed(1))  
    });

    // // console.log(result)
    // // console.log('--------------------------------------------------' + timeStr)
  }
  SetEfficiency(num){
//     如果是1月，2月，3月，修正系数位0.4
// 如果是4月，5月，6月，修正系数位0.6
// 如果是7月，8月，9月，修正系数位0.9
// 如果是10月修正系数位0.8
// 如果是11月，12月修正系数位0.5

    // 创建一个表示当前日期的Date对象
    const today = new Date();

    // 获取当前月份（0-11），加1转换为实际月份（1-12）
    const currentMonth = today.getMonth() + 1;
    // // console.log(num)

    if([1,2,3].includes(currentMonth)){
      num *= 0.4 
    }else if([4,5,6].includes(currentMonth)){
      num *= 0.6
    }else if([7,8,9].includes(currentMonth)){
      num *= 0.9
    }else if([10].includes(currentMonth)){
      num *= 0.8
    }else if([11,12].includes(currentMonth)){
      num *= 0.5
    }
    // // console.log(num)
    return  Number((num * 100).toFixed(2));
  }
      // 转换时间为分钟数
  toMinutes(str) {
    const [h, m] = str.split(":").map(Number);
    return h * 60 + m;
  }
  // 获取不包含本月的近6个月中文月份数组（如当前是8月，则返回 ["2月", "3月", "4月", "5月", "6月", "7月"]）
  getLastSixMonths() {
    const months = [];
    const today = moment();
    
    // 循环获取：从当前月的前1个月开始，往前推5个月（共6个月）
    for (let i = 0; i <= 5; i++) {
      // 计算目标月份（当前月 - i个月）
      const targetMonth = moment(today).subtract(i, 'months');
      // 格式化为 "x月" 形式（如 "7月"）
      months.push(targetMonth.format('M月'));
    }
    
    return months.reverse(); 
  }

  // 获取不包含本月的近6个月中文月份数组（如当前是8月，则返回 ["2月", "3月", "4月", "5月", "6月", "7月"]）
  getLastSixMonthsNum() {
    const months = [];
    const today = moment();

    // 创建当前日期对象
    const today02 = new Date();
    // 获取当月的日期（1-31）
    const day = today02.getDate();
    
    // 循环获取：从当前月的前1个月开始，往前推5个月（共6个月）
    for (let i = 0; i <= 5; i++) {
      // 计算目标月份（当前月 - i个月）
      const targetMonth = moment(today).subtract(i, 'months');
      // 格式化为 "x月" 形式（如 "7月"）
      months.push(targetMonth.format('M'));
    }
    
    const monthArr = months.reverse();
    // 每月中的电量
    const numArr = [1101, 1068, 1440, 2144, 2489, 1869, 2821, 2319, 2336, 1656, 1174, 961]
    // 每月平均每天的电量
    const numArr02 = [36.7, 35.6, 48, 71.5, 82.9, 62.3, 94, 77.3, 77.8, 55.2, 39.1, 32]
    let arr = []
    monthArr.forEach((item, index) => {
      if(index === monthArr.length - 1){
        let sum = numArr02[item - 1] * day
        arr.push(parseFloat(sum.toFixed(1)));
      }else{
        arr.push(numArr[item - 1])
      }
    })
    return arr
  }


  // 获取近7天的日期数组（包括今天）
  getLastSevenDays() {
    const days = [];
    const today = moment();
    
    // 循环获取近7天（从6天前到今天）
    for (let i = 6; i >= 0; i--) {
      // 计算目标日期（今天 - i天）
      const targetDay = moment(today).subtract(i, 'days');
      
      // 格式化：月 + 日 + 后缀（1号用"号"，其他用"日"）
      const month = targetDay.format('M');
      const day = targetDay.format('D');
      const suffix = day === '1' ? '号' : '日';
      
      days.push(`${month}月${day}${suffix}`);
    }
    
    return days;
  }

  // 获取近7天的日期数组（包括今天）
  getLastSevenDaysNum() {
    const numArr = [36.7, 35.6, 48, 71.5, 82.9, 62.3, 94, 77.3, 77.8, 55.2, 39.1, 32]
    const numArr02 = [0.0509, 0.0494, 0.0666, 0.0993, 0.1151, 0.0865, 0.1305, 0.1073, 0.1080, 0.0766, 0.0543, 0.0444]
    // 获取当前日期对象
    const now = new Date();

    // 获取当前月份（1-12）
    const currentMonth = now.getMonth();

    for(let i = 0 ; i < 7; i++){
      // 加入随机浮动（上下10%）
      const randomFactor = 0.9 + Math.random() * 0.2; // [0.9, 1.1]
      if(i === 6){
        const now = moment();
        const hour = now.hour();
        const minute = now.minute();
        
        // 计算当前时间的分钟数（便于比较）
        const currentMinutes = hour * 60 + minute;
        // 6点对应的分钟数
        const start1 = 6 * 60;
        // 17点对应的分钟数
        const start2 = 19 * 60;
        let sum = 0
        if(currentMinutes > start2){
          sum = numArr02[currentMonth] * (19 - 6) * 60
        }else if(currentMinutes > start1){
          sum = numArr02[currentMonth] * (currentMinutes - start1)
        }
        if(this.state.lastSevenDaysNum.length < 7){
          this.state.lastSevenDaysNum.push(parseFloat(sum.toFixed(1)));
        }else{
          // 方法1：使用扩展运算符(...)复制数组并修改指定元素
          this.setState(prevState => {
            // 复制原数组（创建新数组，不修改原state）
            const newArray = [...prevState.lastSevenDaysNum];
            // 修改第7个元素（索引为6）
            newArray[6] = parseFloat(sum.toFixed(1));
            // 返回新的state
            return { lastSevenDaysNum: newArray };
          });
        }
      }else{
        const value = numArr[currentMonth] * randomFactor
        if(this.state.lastSevenDaysNum.length < 7){
          this.state.lastSevenDaysNum.push(parseFloat(value.toFixed(1)));
        }
      }
    }
  }

  checkTimeRange() {
      const now = moment();
      const hour = now.hour();
      const minute = now.minute();
      
      // 计算当前时间的分钟数（便于比较）
      const currentMinutes = hour * 60 + minute;

      // 6点1分对应的分钟数
      const start1 = 6 * 60 + 1;

      // 6点6分对应的分钟数
      const start2 = 6 * 60 + 6;

      // 6点10分对应的分钟数
      const start3 = 6 * 60 + 10;

      // 6点13分对应的分钟数
      const start4 = 6 * 60 + 13;

      // 6点23分对应的分钟数
      const start5 = 6 * 60 + 23;

      // 6点36分对应的分钟数
      const start6 = 6 * 60 + 36;
      
      // 19点1分对应的分钟数
      const start7 = 19 * 60 + 1;
      
      // 19点6分对应的分钟数
      const start8 = 19 * 60 + 6;
      
      // 19点10分对应的分钟数
      const start9 = 19 * 60 + 10;
      
      // 19点13分对应的分钟数
      const start10 = 19 * 60 + 13;
      
      // 19点23分对应的分钟数
      const start11 = 19 * 60 + 23;

      // 19点36分对应的分钟数
      const start12 = 19 * 60 + 36;

      let num = 0

      if(currentMinutes < start1){
        num = 0
      } else if (currentMinutes < start2){
        num = 1
      } else if (currentMinutes < start3){
        num = 2
      } else if (currentMinutes < start4){
        num = 4
      } else if (currentMinutes < start5){
        num = 8
      } else if (currentMinutes < start6){
        num = 10
      } else if (currentMinutes < start7){
        num = 13
      } else if (currentMinutes < start8){
        num = 12
      } else if (currentMinutes < start9){
        num = 11
      } else if (currentMinutes < start10){
        num = 9
      } else if (currentMinutes < start11){
        num = 5
      } else if (currentMinutes < start12){
        num = 3
      }
      this.setOpenCloseStation(num)
                    
      // 在上述区间返回false，否则返回true
      return num;
  }
  setOpenCloseStation(num){
    // console.log(num)
    const dataAll = [ ...this.state.realDataList]
    let selectIndexOne = []
    dataAll.forEach((item, index) => {
      if(item.status === 1) {
        selectIndexOne.push(index)
      }
    })


    const selectArr = this.adjustArray(selectIndexOne, num)

    // // console.log(arr)
    // // console.log(selectIndexOne)
    this.setState(prevState => {
      // 复制原数组（创建新数组，不修改原state）
      const newArray = [...prevState.realDataList];
      for(let i = 0; i <= 12; i++){
        if(selectArr.includes(i)){
          newArray[i].status = 1
        }else{
          newArray[i].status = 3
        }
      }
      // 修改第7个元素（索引为6）
      // 返回新的state
      // console.log(newArray)

      return { realDataList: newArray };
    });
  }

  // 获取随机电站
  adjustArray(arr, num) {
    // console.log(arr)
    // console.log(num)
    if (num < 0 || num > 13) throw new Error("数字必须在 0-13 之间");

    let result = [...arr];

    if (result.length < num) {
      // 所有未使用的数字
      let candidates = [];
      for (let i = 0; i <= 12; i++) {
        if (!result.includes(i)) {
          candidates.push(i);
        }
      }

      // 随机选择缺少的数量
      let needed = num - result.length;
      for (let i = 0; i < needed; i++) {
        let randomIndex = Math.floor(Math.random() * candidates.length);
        result.push(candidates[randomIndex]);
        candidates.splice(randomIndex, 1); // 避免重复
      }
    } else if (result.length > num) {
      // 随机删除直到长度等于 num
      while (result.length > num) {
        let randomIndex = Math.floor(Math.random() * result.length);
        result.splice(randomIndex, 1);
      }
    }
    // console.log(result)
    return result;
  }

  energyConservationAndEmissionReduction() {
      const now = moment();
      const hour = now.hour();
      const minute = now.minute();
      
      // 计算当前时间的分钟数（便于比较）
      const currentMinutes = hour * 60 + minute;
      // 6点对应的分钟数
      const start1 = 6 * 60;
      // 19点对应的分钟数
      const start2 = 19 * 60;
      let num01 = 0
      let num02 = 0
      let num03 = 0

      if(currentMinutes > start2){
        num01 = (start2 - start1) * 0.26 / 5
        num02 = (start2 - start1) * 0.52 / 5
        num03 = (start2 - start1) * 0.26 / 5
      } else if (currentMinutes > start1){
        num01 = (currentMinutes - start1) * 0.26 / 5
        num02 = (currentMinutes - start1) * 0.52 / 5
        num03 = (currentMinutes - start1) * 0.26 / 5
      }

      this.setState({
        energyData: {
          CO2Emissions: parseFloat((18628.22 + num01).toFixed(2)),
          greenPlants: parseFloat((10351.12 + num02).toFixed(2)),
          coalEnergySaving: parseFloat((7473.7 + num03).toFixed(2)),
        },
      });
  }
    // 显示数字的函数
  renderNumber(containerId, value) {
    const container = document.getElementById(containerId);
    container.innerHTML = "";

    // 拆分整数部分和小数部分
    let [intPart, decimalPart] = value.toString().split(".");

    // 从右往左，每3位加一个标记
    let chars = [];
    let count = 0;
    for (let i = intPart.length - 1; i >= 0; i--) {
      chars.unshift(intPart[i]);
      count++;
      if (count % 3 === 0 && i !== 0) {
        chars.unshift(" "); // 占位符
      }
    }

    // 拼回小数部分
    if (decimalPart) {
      chars.push(".");
      chars.push(...decimalPart.split(""));
    }

    // 渲染
    chars.forEach(ch => {
      if (ch === " ") {
        const div = document.createElement("div");
        div.className = "spacer"; // 空格方块
        container.appendChild(div);
      } else {
        const div = document.createElement("div");
        div.className = "digit";
        div.textContent = ch;
        container.appendChild(div);
      }
    });
  }

  initalECharts5() {
    this.setState(
      { myChart6: echarts.init(document.getElementById('mainMap3')) },
      () => {
        // 示例使用（假设当前是2025年8月）
        const lastSixMonths = this.getLastSixMonths();
        const lastSixMonthsNum = this.getLastSixMonthsNum();
        // // console.log(lastSixMonths);
        // 输出：["3月", "4月", "5月", "6月", "7月", "8月"]
        this.state.myChart6.setOption({
          title: {
            show: true,
            text: '近6个月发电',
            // subtext: '单位：MWp', // 单位文本
            x: 'center',
            textStyle: {
              //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontSize: 14,
              fontStyle: 'normal',
              fontWeight: 'normal',
              color: '#01c4f7'
            }
          },
            // 添加 graphic 组件显示单位
          graphic: [{
            type: 'text',
            left: 10, // 距离左侧10px
            top: 10, // 距离顶部10px
            style: {
              text: '单位：MWh',
              fontSize: 12,
              fill: '#c3dbff' // 文字颜色
            }
          }],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: [],
            textStyle: {
              fontSize: 12,
              color: '#ffffff'
            },
            top: 20,
            itemWidth: 20, // 设置宽度

            itemHeight: 12, // 设置高度

            itemGap: 10 // 设置间距
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: lastSixMonths,
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#07234d']
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#c3dbff', //更改坐标轴文字颜色
                fontSize: 12 //更改坐标轴文字大小
              }
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#07234d']
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#c3dbff', //更改坐标轴文字颜色
                fontSize: 12 //更改坐标轴文字大小
              }
            }
          },
          series: [
            {
              name: '发电量',
              type: 'bar',
              data: lastSixMonthsNum,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#9408fc' },
                  { offset: 1, color: '#05aed3' }
                ])
              }
            },
          ]
        })
      }
    )
  }
  initalECharts4() {
    this.setState(
      { myChart5: echarts.init(document.getElementById('mainMap2')) },
      () => {
        // 示例使用（假设当前是2025年8月22日）
        const lastSevenDays = this.getLastSevenDays();
        // // console.log(lastSevenDays);
        // 输出：["8月16日", "8月17日", "8月18日", "8月19日", "8月20日", "8月21日", "8月22日"]
        this.getLastSevenDaysNum()
        const lastSevenDaysNum = this.state.lastSevenDaysNum
        this.state.myChart5.setOption({
          title: {
            show: true,
            text: '近7天发电',
            x: 'center',
            textStyle: {
              //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontSize: 14,
              fontStyle: 'normal',
              fontWeight: 'normal',
              color: '#01c4f7'
            }
          },
          // 添加 graphic 组件显示单位
          graphic: [{
            type: 'text',
            left: 10, // 距离左侧10px
            top: 10, // 距离顶部10px
            style: {
              text: '单位：MWh',
              fontSize: 12,
              fill: '#c3dbff' // 文字颜色
            }
          }],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: [],
            textStyle: {
              fontSize: 12,
              color: '#ffffff'
            },
            top: 20,
            itemWidth: 20, // 设置宽度

            itemHeight: 12, // 设置高度

            itemGap: 10 // 设置间距
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: lastSevenDays,
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#07234d']
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#c3dbff', //更改坐标轴文字颜色
                fontSize: 12 //更改坐标轴文字大小
              }
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#07234d']
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#c3dbff', //更改坐标轴文字颜色
                fontSize: 12 //更改坐标轴文字大小
              }
            }
          },
          series: [
            {
              name: '发电量',
              type: 'bar',
              data: lastSevenDaysNum,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#9408fc' },
                  { offset: 1, color: '#05aed3' }
                ])
              }
            },
          ]
        })
      }
    )
  }
  initalECharts3() {
    this.setState(
      { myChart4: echarts.init(document.getElementById('countyMap')) },
      () => {
        this.state.myChart4.setOption({
          color: ['#2686dc'],
          legend: {
            top: 30,
            data: ['数量'],
            textStyle: {
              fontSize: 12,
              color: '#ffffff'
            },
            icon: 'circle',
            itemWidth: 10, // 设置宽度

            itemHeight: 10, // 设置高度

            itemGap: 10 // 设置间距
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#07234d']
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#c3dbff', //更改坐标轴文字颜色
                fontSize: 12 //更改坐标轴文字大小
              }
            }
          },
          yAxis: {
            type: 'category',
            data: [ '黑龙江', '安徽', '山西', '湖北', '四川', '江苏' ],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#c3dbff', //更改坐标轴文字颜色
                fontSize: 12 //更改坐标轴文字大小
              }
            }
          },
          series: [
            {
              name: '数量',
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
                position: 'insideRight'
              },
              data: [1, 1, 1, 1, 3, 6]
            },
          ]
        })
      }
    )
  }
  initalECharts2() {
    this.setState(
      { myChart3: echarts.init(document.getElementById('cityMap')) },
      () => {
        this.state.myChart3.setOption({
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#d000d0' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#7006d9' // 100% 处的颜色
              }
            ],
            globalCoord: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#07234d']
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#c3dbff', //更改坐标轴文字颜色
                  fontSize: 12 //更改坐标轴文字大小
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'category',
              data: ['科技', '母婴', '男士', '美妆', '珠宝', '宠物'],
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#c3dbff', //更改坐标轴文字颜色
                  fontSize: 12 //更改坐标轴文字大小
                }
              }
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330]
            }
          ]
        })
      }
    )
  }
  initalECharts1() {
    this.setState(
      { myChart2: echarts.init(document.getElementById('provinceMap')) },
      () => {
        this.state.myChart2.setOption({
          color: ['#9702fe', '#ff893b', '#37cbff', '#d90051', '#b2e269'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            top: 30,
            right: '20%',
            data: ['美妆', '百度', '教育', '理财', '母婴'],
            textStyle: {
              fontSize: 12,
              color: '#ffffff'
            },
            icon: 'circle',
            itemWidth: 10, // 设置宽度

            itemHeight: 10, // 设置高度

            itemGap: 10 // 设置间距
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['35%', '50%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 335, name: '美妆' },
                { value: 310, name: '百度' },
                { value: 234, name: '教育' },
                { value: 135, name: '理财' },
                { value: 1548, name: '母婴' }
              ]
            }
          ]
        })
      }
    )
  }
  initalECharts() {
    echarts.registerMap('zhongguo', geoJson)
    const flyGeo = {
      洛阳: [112.460299, 34.62677],
      西安: [108.946466, 34.347269],
      兰州: [103.84044, 36.067321],
      乌鲁木齐: [87.62444, 43.830763],
      包头: [109.846544, 40.662929],
      西宁: [101.78443, 36.623393],
      银川: [106.258602, 38.487834],
      成都: [104.081534, 30.655822],
      重庆: [106.558434, 29.568996],
      拉萨: [91.120789, 29.65005],
      昆明: [102.852448, 24.873998],
      贵阳: [106.636577, 26.653325],
      太原: [112.534919, 37.873219],
      武汉: [114.311582, 30.598467],
      长沙: [112.945473, 28.234889],
      南昌: [115.864589, 28.689455],
      合肥: [117.233443, 31.826578],
      杭州: [120.215503, 30.253087],
      广州: [113.271431, 23.135336],
      北京: [116.413384, 39.910925],
      天津: [117.209523, 39.093668]
    }

    //飞线数据
    const flyVal = [
      [{ name: '洛阳' }, { name: '洛阳', value: 100 }],
      [{ name: '洛阳' }, { name: '西安', value: 35 }],
      [{ name: '洛阳' }, { name: '兰州', value: 25 }],
      [{ name: '洛阳' }, { name: '乌鲁木齐', value: 55 }],
      [{ name: '洛阳' }, { name: '包头', value: 60 }],
      [{ name: '洛阳' }, { name: '西宁', value: 45 }],
      [{ name: '洛阳' }, { name: '银川', value: 35 }],
      [{ name: '洛阳' }, { name: '成都', value: 35 }],
      [{ name: '洛阳' }, { name: '重庆', value: 40 }],
      [{ name: '洛阳' }, { name: '拉萨', value: 205 }],
      [{ name: '洛阳' }, { name: '昆明', value: 50 }],
      [{ name: '洛阳' }, { name: '贵阳', value: 55 }],
      [{ name: '洛阳' }, { name: '太原', value: 60 }],
      [{ name: '洛阳' }, { name: '武汉', value: 65 }],
      [{ name: '洛阳' }, { name: '长沙', value: 70 }],
      [{ name: '洛阳' }, { name: '南昌', value: 75 }],
      [{ name: '洛阳' }, { name: '合肥', value: 80 }],
      [{ name: '洛阳' }, { name: '杭州', value: 85 }],
      [{ name: '洛阳' }, { name: '广州', value: 90 }],
      [{ name: '洛阳' }, { name: '北京', value: 95 }],
      [{ name: '洛阳' }, { name: '天津', value: 60 }]
    ]
    //数据转换，转换后格式：[{fromName:'cityName', toName:'cityName', coords:[[lng, lat], [lng, lat]]}, {...}]

    //数据转换，转换后格式：[{fromName:'cityName', toName:'cityName', coords:[[lng, lat], [lng, lat]]}, {...}]
    const convertFlyData = function(data) {
      let res = []
      for (let i = 0; i < data.length; i++) {
        let dataItem = data[i]
        let toCoord = flyGeo[dataItem[0].name]
        let fromCoord = flyGeo[dataItem[1].name]
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[1].name,
            toName: dataItem[0].name,
            coords: [fromCoord, toCoord]
          })
        }
      }
      return res
    }
    //报表配置
    const originName = '浙江'
    const flySeries = []
    ;[[originName, flyVal]].forEach(function(item, i) {
      flySeries.push(
        {
          name: item[0],
          type: 'lines',
          zlevel: 1,
          symbol: ['none', 'none'],
          symbolSize: 0,
          effect: {
            //特效线配置
            show: true,
            period: 5, //特效动画时间，单位s
            trailLength: 0.1, //特效尾迹的长度，从0到1
            symbol: 'arrow',
            symbolSize: 5
          },
          lineStyle: {
            normal: {
              color: '#f19000',
              width: 1,
              opacity: 0.6,
              curveness: 0.2 //线的平滑度
            }
          },
          data: convertFlyData(item[1])
        },
        {
          name: item[0],
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 5, //特效动画时长
            scale: 4, //波纹的最大缩放比例
            brushType: 'stroke' //波纹的绘制方式：stroke | fill
          },
          label: {
            normal: {
              show: false,
              position: 'right',
              formatter: '{b}'
            }
          },
          symbol: 'circle',
          symbolSize: function(val) {
            //根据某项数据值设置符号大小
            return val[2] / 10
          },
          itemStyle: {
            normal: {
              color: '#f19000'
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[1].name,
              value: flyGeo[dataItem[1].name].concat([dataItem[1].value])
            }
          })
        },
        {
          //与上层的点叠加
          name: item[0],
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 3,
          symbol: 'circle',
          symbolSize: function(val) {
            //根据某项数据值设置符号大小
            return val[2] / 15
          },
          itemStyle: {
            normal: {
              color: '#f00'
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[1].name,
              value: flyGeo[dataItem[1].name].concat([dataItem[1].value])
            }
          })
        }
      )
    })

    this.setState(
      { myChart1: echarts.init(document.getElementById('mainMap')) },
      () => {
        this.state.myChart1.setOption({
          tooltip: {
            trigger: 'item'
          },
         
          visualMap: {
            // orient: 'horizontal',
            min: 0,
            left: '20%',
            max: 6,
            text: ['高', '低'], // 文本，默认为数值文本
            splitNumber: 0,
            color: ['#0054bb', '#85ADDE'],
            textStyle: {
              color: '#c3dbff'
            }
          },

          series: [
            {
              name: '2025全国光伏电站分布',
              type: 'map',
              mapType: 'china',
              mapLocation: {
                x: 'left'
              },
              // selectedMode: 'multiple',
              itemStyle: {
                normal: { label: { show: true, color: '#fff' }, borderWidth: 0 }
                // emphasis: { label: { show: true } },
                // borderWidth: 0,
                // borderColor: '#eee',
              },

              data: [
                { name: '西藏', value: 0 },
                { name: '青海', value: 0 },
                { name: '宁夏', value: 0 },
                { name: '海南', value: 0 },
                { name: '甘肃', value: 0 },
                { name: '贵州', value: 0 },
                { name: '新疆', value: 0 },
                { name: '云南', value: 0 },
                { name: '重庆', value: 0 },
                { name: '吉林', value: 0 },
                { name: '山西', value: 1 },
                { name: '天津', value: 0 },
                { name: '江西', value: 0 },
                { name: '广西', value: 0 },
                { name: '陕西', value: 0 },
                { name: '黑龙江', value: 1 },
                { name: '内蒙古', value: 0 },
                { name: '安徽', value: 1 },
                { name: '北京', value: 0 },
                { name: '福建', value: 0 },
                { name: '上海', value: 0 },
                { name: '湖北', value: 1 },
                { name: '湖南', value: 0 },
                { name: '四川', value: 3 },
                { name: '辽宁', value: 0 },
                { name: '河北', value: 0 },
                { name: '河南', value: 0 },
                { name: '浙江', value: 0 },
                { name: '山东', value: 0 },
                { name: '江苏', value: 6 },
                { name: '广东', value: 0 },
                { name: '台湾', value: 0 },
                { name: '南海诸岛', value: 0 }
              ]
            }
          ]
        })
      }
    )
  }
  
  render() { 
    const { topdata ,tabledata, dateRaw, effectivePower, nowTime, days, weekdaysNow, RunningNum, RunningNumPer, RunningNumPerOther, energyData } = this.state
    return ( 
      <div className="data">
        <header className="header_main">
          <div className="left_bg">
            <div className='time_banner'>
              <div>{weekdaysNow}&nbsp;&nbsp;&nbsp;{ nowTime }</div>
              <div className='time_banner02'>安全运营 { days }天</div>
            </div>
          </div>
          <div className="right_bg"></div>
          <h3>泰能智慧能源大数据平台</h3>
        </header>
        <div className="wrapper">
          <div className="container-fluid">
            <div className="row fill-h" style={{ display: 'flex' }}>
              <div className="col-lg-3 fill-h" style={{ width: '25%' }}>

                <div className="xpanel-wrapper xpanel-wrapper-5">
                  {/* <BorderBox13>
                    <div className="xpanel">
                      <div className="fill-h" id="mainMap1">
                        <ScrollRankingBoard config={topdata}/>
                      </div>
                    </div>
                  </BorderBox13> */}
                  <div className="content_title" style={{left: '12%'}}>省份电站排名</div>
                  <BorderBox1>
                    <div className="xpanel">
                      <div className="fill-h" id="countyMap"></div>
                    </div>
                  </BorderBox1>
                </div>
                
                <div className="xpanel-wrapper xpanel-wrapper-4">
                  <BorderBox8>
                      <div className="xpanel">
                        <div className="fill-h" id="mainMap3"></div>
                      </div>
                    </BorderBox8>
                </div>
              </div>
              <div className="col-lg-6 fill-h" style={{ width: '50%' }}>
                <div className="xpanel-wrapper xpanel-wrapper-5">
                  <div
                    className="xpanel"
                    style={{
                      position: 'relative'
                    }}
                  >
                    <div className="map_bg"></div>
                    <div className="circle_allow"></div>
                    <div className="circle_bg"></div>
                    <div style={{width:'100%', position:'absolute',top:10,display:'flex',left:'50%', justifyContent:'center',color:'#fff',alignItems:'center',transform:'translateX(-50%)'}}>
                      <p>全国光伏电站：</p>
                      {/* <div className="databg">0</div>
                      <div className="databg">0</div>
                      <div className="databg">0</div>
                      <div className="databg">0</div>
                      <div className="databg">0</div>
                      <div className="databg">0</div> */}
                      <div className="databg">0</div>
                      <div className="databg">1</div>
                      <div className="databg">3</div>
                    </div>
                    <div className='warning_sty'>
                      <div>
                        <div className="board">
                          <div className="title">总发电量 <span style={{fontSize: '0.8rem'}}>kWh</span></div>
                          <div className="number" id="power">
                          </div>
                        </div>

                        <div className="board">
                          <div className="title">累计收益 <span style={{fontSize: '0.8rem'}}>元</span></div>
                          <div className="number" id="income">
                          </div>
                        </div>
                      </div>

                      <div className='mb-10 flex-my'>
                        <span className='blue-circle mr-20'></span>
                        <span className='mr-20'>在线</span>
                        <span className='w-15'>{ RunningNumPer }</span>
                        <span>{ RunningNum }</span>
                      </div>
                      <div className='mb-10 flex-my'>
                        <span className='red-circle mr-20'></span>
                        <span className='mr-20'>报警</span>
                        <span className='w-15'>0%</span>
                        <span>0</span>
                      </div>
                      <div className='mb-10 flex-my'>
                        <span className='gray-circle mr-20'></span>
                        <span className='mr-20'>离线</span>
                        <span className='w-15'>{ RunningNumPerOther }</span>
                        <span>{ 13 - RunningNum }</span>
                      </div>
                    </div>
                    {/* <div>全淘宝主播数量</div> */}
                    <div
                      style={{
                        height: 60,
                        width: 200,
                        position: 'absolute',
                        top: 20,
                        right: 20
                      }}
                    >
                      <Decoration1 style={{ width: '100%', height: '100%' }} />
                    </div>

                    <div className="fill-h" id="mainMap"></div>
                  </div>
                </div>
                <div
                  className="xpanel-wrapper xpanel-wrapper-4"
                  style={{ display: 'flex' }}
                >
                  {/* <div
                    style={{
                      width: '50%',
                      paddingRight: 8,
                      position: 'relative'
                    }}
                  >
                    <BorderBox8>
                      <div className="xpanel">
                        <div className="fill-h" id="mainMap2"></div>
                      </div>
                    </BorderBox8>
                  </div> */}
                  <div style={{ width: '100%', paddingLeft: 8 }}>
                    <BorderBox13>
                      <div className="xpanel">
                        <div className="fill-h" id="worldMap">
                        <ScrollBoard config={tabledata}  
                          onClick={(row, rowIndex) => {
                            // console.log(row.row[3])
                            if(row.row[3] === '孝感市第一高级中学项目'){
                              // console.log('成功了')
                              window.location.href = 'https://www.ginlongcloud.com/#/PlantDataV2021?id=1299184320439249795'
                            }
                            // 这里可以做跳转、弹窗等操作
                          }}
                        />
                        </div>
                      </div>
                    </BorderBox13>
                  </div>
                </div>
              </div>
              <div className="col-lg-3 fill-h" style={{ width: '25%' }}>
                <div
                  className="xpanel-wrapper xpanel-wrapper-6"
                  style={{ position: 'relative' }}
                >
                  <div className="content_title">实时发电</div>
                  <BorderBox1>
                    {/* <div className="xpanel">
                       <div className="fill-h" id="provinceMap"></div>
                        <div style={{ width: 500, height: 300 }}>
                          <ScrollBoard data={data} />
                        </div>
                    </div> */}
                    <div className='box-my'>
                      <WaterLevelPond config={ dateRaw } style={{ width: '150px', height: '70%' }} />
                      <div style={{ marginLeft: '2rem'}}>
                        <div className='title-my' style={{ marginBottom: '0.5rem'}}>实时功率</div>
                        <div className='data-my' style={{ marginBottom: '1rem'}}>{ effectivePower }MW</div>
                        <div className='title-my' style={{ marginBottom: '0.5rem'}}>组件总容量</div>
                        <div className='data-my'>18.6MWp</div>
                      </div>
                    </div>
                  </BorderBox1>
                </div>
                <div
                  className="xpanel-wrapper xpanel-wrapper-6"
                  style={{ position: 'relative' }}
                >
                  <div className="content_title">节能减排</div>
                  <BorderBox1>
                    {/* <div className="xpanel">
                      <div className="fill-h" id="cityMap"></div>
                    </div> */}

                    <div className='box-my'>
                      <div className="container-my">
                        <div className="item-my">
                            <img style={{ width: '7rem'}} src="" alt="CO2减排图标" /> 
                            <div className="title-my">CO2减排</div>
                            <div className="data-my">{ energyData.CO2Emissions }t</div>
                        </div>
                        <div className="item-my">
                            <img style={{ width: '7rem'}} src="" alt="等效绿植图标" /> 
                            <div className="title-my">等效绿植</div>
                            <div className="data-my">{ energyData.greenPlants }棵</div>
                        </div>
                        <div className="item-my">
                            <img style={{ width: '7rem'}} src="" alt="节约标准煤图标" /> 
                            <div className="title-my">节约标准煤</div>
                            <div className="data-my">{ energyData.coalEnergySaving }t</div>
                        </div>
                      </div>
                    </div>
                  </BorderBox1>
                </div>
                <div
                  className="xpanel-wrapper xpanel-wrapper-4"
                  style={{ position: 'relative' }}
                >
                  {/* <div className="content_title">省份电站排名</div> */}
                  <BorderBox1>
                    {/* <div className="xpanel">
                      <div className="fill-h" id="countyMap"></div>
                    </div> */}
                    <div className="xpanel">
                      <div className="fill-h" id="mainMap2"></div>
                    </div>
                  </BorderBox1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
     );
  }
}
 
export default App;
